<template>
  <div id="vue-mapbox"></div>
</template>

<script>
  import mapboxgl from 'mapbox-gl'; 
  import 'mapbox-gl/dist/mapbox-gl.css';
	export default {
		name: 'mapboxMap',
		data() {
			return {
				map: null,
			}
		},
		mounted() {
			this.initMap();
		},
		methods: {

			initMap() {			
				mapboxgl.accessToken = this.$root.mapboxToken; //自己的token
        const tianditu = {
                          version: 8,
                          sources : {
                            'tianditu': {
                              type: 'raster',
                              tiles: [
                                'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=be91f36f4ea2161b0721a5b4f7628a3d'
                              ],
                              tileSize: 256,
                            },
                              'tianditu_labels': {
                              type: 'raster',
                              tiles: [                                
                                'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=be91f36f4ea2161b0721a5b4f7628a3d'
                              ],
                              tileSize: 256,
                            }
                          },
                          layers: [
                            {
                              id: 'tianditu',
                              type: 'raster',
                              source: 'tianditu',
                              minzoom : 0,
                              maxzoom : 22
                            },
                            {
                              id: 'tianditu_labels',
                              type: 'raster',
                              source: 'tianditu_labels',
                              minzoom : 0,
                              maxzoom : 22
                            }
                          ]
                        };
        
				const map = new mapboxgl.Map({
				container: 'vue-mapbox', // container ID
				style: tianditu, // style URL
				center: [121.472644,31.231706], // starting position [lng, lat]
				zoom: 4, // starting zoom
        projection: "globe"
				});
        map.on("style.load", function() {
          map.setFog({
            
          })
        });
        
			}
		}
	}
</script>
<style>
	#vue-mapbox {
    position: absolute;
		width: 100%;
		height: 100%;
	}
</style>

